<template>
  <card-component :content-title="contentTitle"
                  :page="page"
                  :isNeedNewUser="true"
                  @addNewUser = "addNewUser"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange">

    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"
                     @handleEdit="handleEdit"
                     @handleDelete="handleDelete"></table-component>

    <user-update-dialog
      slot="dialog"
      :dialogVisible="dialogVisible"
      :formData="formData"
      :rowIndex="rowIndex"
      @cancelDialog="cancelDialog"
      @confrimDialog="confrimDialog"></user-update-dialog>

    <add-user-dialog
      slot="dialog"
      :dialogVisible="addUserdialogVisible"
      @cancelDialog="cancelAddUserDialog"
      :formData="formData"
      @confrimDialog="confrimAddUserDialog"></add-user-dialog>

  </card-component>

</template>


<script>
  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'
  import userManageDialog from '@/base/userManageDialog.vue'
  import addUserDialog from '@/base/addUserDialog.vue'

  export default {
    data() {
      return {
        chanxian: '',
        contentTitle: this.$getTextByLangKey("用户管理"),
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },


//        修改用户信息的对话框
        dialogVisible: false,
        formData: {
          username: '',
          password: '',

        },
        rowIndex: 0,


//        增加用户的对话框

        addUserdialogVisible: false,
      }
    },
    created: function () {

      this.fetchData()
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {
      fetchData: function () {
        this.tableHeader = []
        this.tableData = []

        this.requestUserList()
      },

      requestUserList() {
        request.requestUserList(this.page.currentPage, 20, res => {

          this.tableHeader = this.makeHeader(res.data.data.header)
          this.tableData = this.makeList(res.data.data.list)
//
          this.page.total = res.data.data.total
          this.page.pageSize = res.data.data.pageSize

        })
      },

      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
        this.page.currentPage = val
        this.fetchData()
      },

      handleEdit: function (index, row) {

        this.dialogVisible = true
        this.formData = util.deepCopy(row)
        this.rowIndex = index
      },



      handleDelete: function (index, row) {
        console.log('index', index)
        console.log('row', row)


        request.requestDeleteUserList(row.id,res=>{
          this.requestUserList()
          util.showSuccessToast( this.$getTextByLangKey("删除成功"))
        },err=>{
          util.showErrorToast(err.data.message)

        })

      },


      cancelDialog: function () {
        this.dialogVisible = false;
      },
      confrimDialog: function (val, index) {
        this.dialogVisible = false;

        console.log('val', val)
        request.requestUpdateUserList(val.id, val.username, val.password, val.roles, res => {
          this.requestUserList()
          util.showSuccessToast( this.$getTextByLangKey("修改成功"))
        },err=>{
          util.showErrorToast(err.data.message)

        })
      },


      //增加用户


      addNewUser:function () {
        this.formData = {}
        this.addUserdialogVisible = true;

      },

      cancelAddUserDialog: function () {
        this.addUserdialogVisible = false;
      },
      confrimAddUserDialog: function (val) {
        this.addUserdialogVisible = false;

        this.requestUserList()
      },
      makeHeader: function (list) {

        let indexItem = {
          type: 'index', isShow: true,
          width: '65', label: 'NO.',
        }

        let actionItem = {type: "action", label: this.$getTextByLangKey("操作"), isShow: true}
//        let selectionItem = {
//          type: 'selection', isShow: true
//        }

        console.log(list)
        var header = [indexItem]
        list.forEach(function (item) {
          item.isShow = true
          item.prop === 'roles'?item.prop='rolestext':''
          header.push(item)
        }, this)


        header.push(actionItem)
        console.log(header)
        return header
      },


      makeList: function (list) {
        var data = []
        list.forEach(function (item) {
          if(item.roles==='root'){
            item.action = 'edit'
            item.rolestext = this.$getTextByLangKey("管理员")
          }else{
            item.action = 'edit delete'
            item.rolestext = this.$getTextByLangKey("普通用户")
          }

          data.push(item)
        }, this)
        return data

      },
    },
    components: {
      'table-component': table,
      'card-component': card,
      'user-update-dialog': userManageDialog,
      'add-user-dialog': addUserDialog,
    },

  }
</script>


<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
  }
</style>


